<template>
    <!-- packageMy/myPointMall/myPointMall.wxml -->
    <view class="my-page" :class="uiStyle == 1 ? '' : 'uiStyle'">
       <view class="head-block" >
            <image src="../../static/assets/img/my/jifenBG.png" class="bgimg" mode="widthFix"></image>
            <view class="nav-title" v-if="weixin == 2" :style="'top:10px'">积分商城</view>
        </view>
        <!-- 返回 -->
       <view class="icon" v-if="weixin == 2" @tap="goMy" :style="'top:10px'">
            <van-icon name="arrow-left" color="#fff" size="45rpx" />
        </view>
        <!-- 积分信息 -->
        <view class="my-points">
            <image src="../../static/assets/img/my/jifen-card.png" class="jfimg" mode="widthFix"></image>
            <view class="my-points-userInfo">
                <view class="my-points-userInfo-name">
                    {{ userName }}
                    <!-- <text class="userType">({{ phone }})</text> -->
                </view>
                <view class="my-points-userInfo-address">
                    累计兑换积分:
                    <text class="red">{{ usedIntegral }}</text>
                </view>
                <view class="my-points-userInfo-address">
                    即将过期积分:
                    <text class="red">{{ soonExpireIntegral }}</text>
                </view>
                <view class="my-points-userInfo-address">
                    积分清理时间:
                    <text class="black">{{ expireDate }}</text>
                </view>
            </view>
            <view class="my-points-detail">
                <view class="my-points-detail-num">
                    <view class="detail-num">{{ myPoints }}</view>
                    <view class="detail-text">当前积分</view>
                </view>
                <view class="my-points-exchange" @tap="exchangeGift">兑换记录</view>
            </view>
        </view>
        <!-- 积分明细 -->
        <view class="points-detailed">
            <view class="points-detailed-content">
                <view class="points-detailed-title">
                    <image src="../../static/assets/img/my/jifenduihuanicon.png" mode="widthFix"></image>
                    积分商城
                </view>
                <view class="points-detailed-list" v-if="giftList && giftList.length > 0">
                    <view class="points-detailed-item" v-for="(item, index) in giftList" :key="index">
                        <image class="giftImg" :src="item.imageUrlEncry" mode="widthFix"></image>

                        <view class="giftTitle">{{ item.name }}</view>

                        <view class="giftpoints">{{ item.integralAmount }}分</view>

                        <view class="exchangeBtn" @tap="goExchange" :data-item="item">立即兑换</view>
                    </view>
                </view>
                <!-- <noData text="暂无数据" wx:else /> -->
                <view class="no-data" v-else>
                    <image src="../../static/assets/img/No-Data.png" mode="widthFix"></image>
                    <view class="no-data-info">暂无数据</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();

import api from '../../utils/api.js'
import util from '../../utils/util.js';
export default {
    data() {
        return {
            statusBarHeight:10,
            usedIntegral: 0,
            soonExpireIntegral: 0,
            expireDate: '',
            userName: '',
            userType: '',
            phone: '',
            address: '',
            myPoints: 0,
            pageNumber: 1,
            totalPages: 1,

            giftList: [
            
            ],

            pointsList: '',
			uiStyle:1,
			weixin:uni.getStorageSync('weixin')
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		this.uiStyle = uni.getStorageSync('uiStyle')
        // this.getPoints()
        // this.getPointsList()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.setData({
            pageNumber: 1
        });
        this.getPoints2();
        this.queryIntegralGoods(); // this.getPoints()
        // this.getPointsList()
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {
        if (this.pageNumber + 1 <= this.totalPages) {
            // 若不是最后一页，则将当前页数增加1，获取数据
            this.setData({
                pageNumber: this.pageNumber + 1
            });
            this.getPointsList();
        }
    },
    /**
     * 用户点击右上角分享
     */ methods: {
        goExchange(event) {
            let detail = event.currentTarget.dataset.item;
            uni.navigateTo({
                url: `/pages/pointsMallDetail/pointsMallDetail?giftId=${detail.id}`
            });
        },

        exchangeGift() {
            uni.navigateTo({
                url: '/packageMy/myExchangeRecord/myExchangeRecord'
            });
        },

        goMy() {
            uni.navigateBack({
                delta: 1
            });
        },

        queryIntegralGoods() {
            util.request(api.queryIntegralGoods,{},'POST')
                .then((res) => {
                    //请求成功
                    if (res.code == 0) {
                        this.setData({
                            giftList: res.data
                        });
                    } else {
                        uni.showToast({
                            title: res.msg || '服务器出小差了',
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    //请求失败
                });
        },

        getPointsList() {
            this.initData();
            var identityId = uni.getStorageSync('identityId');
            util.request(api.getMtPointRecord + '?identityId=' + identityId + '&pageSize=10' + '&pageNumber=' + this.pageNumber,'get')
                .then((res) => {
                    //请求成功
                    if (res.code == 0) {
                        let list = [];

                        if (this.pageNumber == 1) {
                            // 若请求第一页，则直接赋值
                            list = res.data.content;
                            this.setData({
                                totalPages: res.data.totalPages
                            });
                        } else {
                            // 否则将获取的数据与原数组合并
                            list = this.pointsList.concat(res.data.content);
                        }

                        this.setData({
                            pointsList: list
                        });
                    } else {
                        uni.showToast({
                            title: res.msg || '服务器出小差了',
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    //请求失败
                    this.setData({
                        pointsList: []
                    });
                });
        },

        //变更后的接口
        getPoints2() {
            this.initData();
            var identityId = uni.getStorageSync('identityId');
            util.request(api.getMyIntegral + '?identityId=' + identityId,'get')
                .then((res) => {
                    //请求成功
                    if (res.code == 0) {
                        this.setData({
                            myPoints: res.data.currentIntegral || 0,
                            usedIntegral: res.data.usedIntegral || 0,
                            soonExpireIntegral: res.data.soonExpireIntegral || 0,
                            expireDate: res.data.expireDate || ''
                        });
                    } else {
                        // wx.showToast({ title: res.msg || '服务器出小差了', icon: "none" });
                    }
                })
                .catch((err) => {
                    //请求失败
                });
        },

        initData() {
            this.setData({
                userName: uni.getStorageSync('name') || '',
                userType: uni.getStorageSync('roleName') || '',
                address: uni.getStorageSync('addressName') || '',
                phone: uni.getStorageSync('phoneNumber')
            });
        }
    }
};
</script>
<style>
@import './myPointMall.css';
</style>
